<template>
  <div class="container">
    <video
      :src="src"
      :poster="poster"
      preload="auto"
      x5-playsinline
      playsinline
      webkit-playsinline
      ref="video"
      x5-video-player-type="h5"
      x5-video-orientation="portraint"
      :controls="controls"
      @ended="ended"
      @canplay="canplay"
      @error="error"
    />
    <slot />
  </div>
</template>

<script>
/**
 * x5-video
 * 已知不(完全)兼容安卓版本机型
 *
 * brand  |   model    |   system   | Android version|  browser   |  others
 *-------------------------------------------------------------------------
 * xiaomi | xiaomi 9   | mui 10.2   | android 9      |            |
 * huawei | Honor 8X   | emui 8.2   | android 8.1    |            |
 * huawei | 畅玩8X     |            | Android 8.1    |  v5.3.x    | 无法横屏
 * huawei | 畅玩6X     |            | Android 8.1    |  v5.3.x    | 无法横屏
 * huawei | nova青春版 |            | Android 8.1    |  v5.3.x    | 无法横屏
 *
 * */
export default {
  name: 'a9-video',
  props: {
    src: {
      // 视频地址
      type: String,
      required: true
    },
    poster: {
      // 海报地址
      type: String,
      default: ''
    },
    controls: {
      // 是否显示控制条
      type: Boolean,
      default: false
    }
  },
  methods: {
    ended () {
      this.$emit('ended')
    },
    canplay () {
      this.$emit('canplay')
    },
    error () {
      this.$emit('error')
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

video {
  width: 100%;
  /*height: auto;*/
  object-fit: fill;
}
</style>
